<template>
    <div class="container">
        <div class="flex-container">
            <div class="flex-item">
                <el-select v-model="options.mode" placeholder="类型选择">
                    <el-option v-for="item in options.modeItems" :key="item.sign" :label="item.name"
                               :value="item.sign"/>
                </el-select>
            </div>
            <el-button @click="exportData">导出订单</el-button>
        </div>
        <el-table v-loading="dataset.loading" :data="dataset.items" class="el-mb-15" stripe>
            <el-table-column prop="ordernumber" label="订单号"/>
            <el-table-column prop="username" label="名称"/>
            <el-table-column prop="znumber" label="总重量"/>
            <el-table-column prop="price" label="总价格"/>
            <el-table-column prop="create_time" label="下单时间"/>
        </el-table>
        <el-pagination
            @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
            :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total"
            :page-sizes="[10, 50, 100, 200, 300]" layout="total, sizes, prev, pager, next, jumper"
        />
    </div>
</template>

<script>
    import {
        Table, TableColumn, Pagination,
        Button,
        Select, Option,
        Drawer, Dialog,
        MessageBox, Message
    } from "element-ui";
    import Vue from 'vue'
    import pluginExport from '@d2-projects/vue-table-export'

    Vue.use(pluginExport)
    export default {
        components: {
            [Table.name]: Table, [TableColumn.name]: TableColumn,
            [Pagination.name]: Pagination,
            [Button.name]: Button,
            [Select.name]: Select, [Option.name]: Option,
            [Drawer.name]: Drawer, [Dialog.name]: Dialog
        },
        data() {
            return {
                options: {
                    mode: 1,
                    modeItems: [
                        {
                            name: "待收取",
                            sign: 1
                        },
                        {
                            name: "待确认",
                            sign: 4
                        },
                        {
                            name: "已完成",
                            sign: 5
                        },
                        {
                            name: "已取消",
                            sign: 6
                        }
                    ]
                },
                dataset: {
                    loading: false,
                    total: 0, limit: 10, page: 1,
                    items: []
                }
            }
        },
        mounted() {
            this.controllerRequestListDataset();
        },
        methods: {
            //导出订单
            exportData() {
                let _this=this;
                this.dataset.loading = true;
                let data = [];
                var url = '/api/admin/order/getlist',
                    params = {
                        page: 0,
                        list_rows: 9999,
                        utype: 1,
                        status: this.options.mode,
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, {
                    success: (res) => {

                        data = res.data.data.map((data, index, arr) => {
                            data.create_time = this.$moment(parseInt(data.create_time) * 1000).format('YYYY-MM-DD HH:mm:ss');
                            return data;
                        });

                        let columns = [
                            {
                                label: '订单号',
                                prop: 'ordernumber'
                            },
                            {
                                label: '名称',
                                prop: 'username'
                            }, {
                                label: '总重量',
                                prop: 'znumber'
                            }, {
                                label: '总价格',
                                prop: 'price'
                            },
                            {
                                label: '下单时间',
                                prop: 'create_time'
                            }
                        ];
                        console.log('logs ', data)
                        _this.$export.excel({
                            columns,
                            data
                        })
                            .then((res) => {
                                // ...可选回调
                            })
                    },
                    fail: (frs) => {
                        data = [];


                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });

            },
            // 获取门店订单数据列表
            controllerRequestListDataset(page) {
                if (this.dataset.loading) return; else this.dataset.loading = true;
                if (page) this.dataset.page = page;

                var url = '/api/admin/order/getlist',
                    params = {
                        page: this.dataset.page - 1, list_rows: this.dataset.limit,
                        utype: 1,
                        status: this.options.mode,
                        token: this.$store.state.options.user.token
                    };

                this.$util.postRequestInterface(url, params, {
                    success: (res) => {
                        this.dataset.total = res.data.count;
                        this.dataset.items = res.data.data.map((data, index, arr) => {
                            data.create_time = this.$moment(parseInt(data.create_time) * 1000).format('YYYY-MM-DD HH:mm:ss');
                            return data;
                        });
                    },
                    fail: (frs) => {
                        this.dataset.items = [];
                    },
                    complete: (e) => {
                        this.dataset.loading = false;
                    }
                });
            },
            eventUpdateRequestLimit(limit) {
                if (this.dataset.loading) return;

                this.dataset.limit = limit;
                this.dataset.page = 1;
                this.dataset.total = 0;

                this.controllerRequestListDataset();
            }
        },
        watch: {
            "options.mode"(nVal, oVal) {
                this.options.mode = nVal;

                this.controllerRequestListDataset();
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
